<template>
  <div>
      商品编号/商品名称/规格/属性
      <el-input style="margin: 10px; width: 100px" v-model="form.productCodeOrName"></el-input>
      交货日期
        <el-date-picker
          v-model="form.deliveryDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          >
        </el-date-picker>
      销售订单号
      <el-input style="margin: 10px; width: 100px" v-model="form.salesOrderNumber"></el-input>
      客户
        <el-input style="margin: 10px; width: 100px" v-model="form.customer"></el-input>
        <el-button style="margin-left: -10px;" @click="dialogVisible2 = true">...</el-button>
        <br>
      默认供应商
        <el-input style="margin: 10px; width: 100px" v-model="form.pro"></el-input>
        <el-button style="margin-left: -10px;" @click="dialogVisible = true">...</el-button>
        品牌
        <el-input style="margin: 10px; width: 100px" v-model="form.brand"></el-input>
        <el-checkbox v-model="form.showAvailableInventory">显示可用库存</el-checkbox>
        <el-checkbox v-model="form.excludeCompletedOrders">销售订单范围：已采购完订单不显示</el-checkbox>&nbsp;
      <el-button type="primary" @click="handleSubmit">查询</el-button>

      
    <el-divider></el-divider>
    <div style="float: right; margin-bottom: 10px">
      <el-button  @click="goto('Order')">生成购货订单</el-button>
      <el-button >导出</el-button>
    </div>

    <el-table :data="orders" style="width: 100%">
     <el-table-column prop="productCode" label="销货订单信息"> 
  <el-table-column prop="productCode" label="商品编号"></el-table-column>
  <el-table-column prop="productName" label="商品名称"></el-table-column>
  <el-table-column prop="supplier" label="默认供应商"></el-table-column>
  <el-table-column prop="attributes" label="属性"></el-table-column>
  <el-table-column prop="unit" label="单位"></el-table-column>
  <el-table-column prop="quantity" label="数量"></el-table-column>
  <el-table-column prop="warehouse" label="仓库"></el-table-column>
  <el-table-column prop="customerName" label="客户名称"></el-table-column>
  <el-table-column prop="customerCode" label="客户编码"></el-table-column>
  <el-table-column prop="customerAddress" label="客户地址"></el-table-column>
  <el-table-column prop="orderNumber" label="订单号"></el-table-column>
  <el-table-column prop="orderDate" label="订单日期"></el-table-column>
  <el-table-column prop="stock" label="库存"></el-table-column>
  <el-table-column prop="deliveryDate" label="交货日期"></el-table-column>
  <el-table-column prop="purchaseSaleDate" label="销货日期"></el-table-column>
  <el-table-column prop="purchaseOrderNumber" label="购货订单号"></el-table-column>
  <el-table-column prop="salesBasedPurchaseQuantity" label="以销定购数量"></el-table-column>
  </el-table-column>
  <el-table-column prop="productCode" label="实际入库数量"> 
  <el-table-column prop="actualInboundQuantity" label="实际入库数量"></el-table-column>
  <el-table-column prop="salesOrderNumber" label="销货单号"></el-table-column>
  <el-table-column prop="salesOutboundQuantity" label="销货出库数量"></el-table-column>
  <el-table-column prop="unfulfilledQuantity" label="未出库数量"></el-table-column>
  <el-table-column prop="pendingPurchaseQuantity" label="待采购数量"></el-table-column>
  </el-table-column>
  <el-table-column prop="purchaseSaleDate" label="本次采购信息">
  <el-table-column prop="currentPurchaseQuantity" label="*本次采购数量">
  </el-table-column>
  <el-table-column prop="currentPurchasePrice" label="本次采购价格">
  </el-table-column>
  </el-table-column>
</el-table>


 <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="4"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems">
          </el-pagination>
        </div>
    

        <el-dialog title="选择客户" :visible.sync="dialogVisible2" @close="handleDialogClose">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchQuery2"
          placeholder="请输入客户编号或名称或联系人"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="showDisabled2">显示禁用客户</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCustomers">查询</el-button>
        <el-button @click="refreshSearch">刷新</el-button>
      </el-form-item>
    </el-form>



    <el-table
      :data="customers"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-key="getRowKey"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="code" label="客户编号" width="120"></el-table-column>
      <el-table-column prop="name" label="客户名称" width="180"></el-table-column>
      <el-table-column prop="category" label="客户类别" width="120"></el-table-column>
      <el-table-column prop="initialReceivable" label="期初应收款" width="120"></el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalProducts">
      </el-pagination>
    </div>

    
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmSelection">确定</el-button>
      <el-button @click="dialogVisible2 = false">取消</el-button>
    </div>
  </el-dialog>



      <el-dialog title="选择供应商" :visible.sync="dialogVisible">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="类别">
          <el-select v-model="selectedCategory" placeholder="请选择类别">
            <el-option label="广东" value="广东"></el-option>
            <el-option
              label="酒水饮料供应商"
              value="酒水饮料供应商"
            ></el-option>
            <el-option label="食品供应商" value="食品供应商"></el-option>
            <el-option label="零食供应商" value="零食供应商"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchQuery"
            placeholder="输入编号/名称/联系人/电话查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="showDisabled">显示禁用供应商</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSuppliers">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="supplier" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="category"
          label="类别"
          width="120"
        ></el-table-column>
        <el-table-column prop="code" label="编号" width="120"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column
          prop="contact"
          label="联系人"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="120"
        ></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button>新增供应商</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </el-dialog>
  </div>  

</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
    pageSize: 4, // 每页显示的项数
    pageSizes: [1, 2, 3, 4], // 可选的每页显示项数
    totalItems: 100, // 总项数
      form: {
        productCodeOrName: '',
        deliveryDate: '',
        salesOrderNumber: '',
        customer: '',
        pro:'',
        brand: '',
        showAvailableInventory: false,
        excludeCompletedOrders: false
      },
      dialogVisible: false,
      selectedCategory: '',
      searchQuery: '',
      showDisabled: false,
      supplier: [],
      selectedSuppliers: [],

      dialogVisible2: false, // 控制弹窗显示
      searchQuery2: '', // 搜索查询
      showDisabled2: false, // 是否显示禁用客户
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      totalCustomers: 0, // 总客户数
      customers: [], // 客户列表
      selectedCustomers: [] ,// 选中的客户

      orders: [
      {
        productCode: 'SP0002',
        productName: '果味饮料',
        supplier: 'G00001 商品综合批发有限公司',
        attributes: '瓶',
        unit: '1',
        quantity: '默认仓库',
        warehouse: '深圳蓝天食品公司',
        customerName: 'G00010 莫小姐|13500000000|广东省深圳市南山区',
        customerCode: 'G00010',
        customerAddress: '莫小姐|13500000000|广东省深圳市南山区',
        orderNumber: 'XHDD20230421004',
        orderDate: '2023-04-21 10:04:04',
        stock: '20230421004',
        deliveryDate: '20230421004',
        purchaseSaleDate: '20230421004',
        purchaseOrderNumber: '20230421004',
        salesBasedPurchaseQuantity: '20230421004',
        actualInboundQuantity: '20230421004',
        salesOrderNumber: '20230421004',
        salesOutboundQuantity: '20230421004',
        unfulfilledQuantity: '20230421004',
        pendingPurchaseQuantity: '20230421004',
        currentPurchaseQuantity: '20230421004',
        currentPurchasePrice: '20230421004'
      },
      // 更多订单对象...
    ]

    };
  },
  methods: {
    handleSubmit() {
      // 处理表单提交
      console.log(this.form);
    },
    viewDashboard() {
      // 跳转到看板
      console.log('查看看板');
      this.$router.push(Order)
    },
    searchSuppliers() {
      console.log('搜索供应商:', this.selectedCategory, this.searchQuery, this.showDisabled);
      // 这里可以添加调用后端API的逻辑
    },
    confirmSelection() {
      this.dialogVisible = false;
      this.$emit('supplier-selected', this.selectedSuppliers);
    },
    fetchSuppliers() {
      // 模拟从后端获取数据
      this.supplier = [
        { category: '广东', code: '001', name: '供应商A', contact: '张三', phone: '1234567890', remarks: '备注A' },
        { category: '酒水饮料供应商', code: '002', name: '供应商B', contact: '李四', phone: '0987654321', remarks: '备注B' },
        // 更多数据...
      ];
    },
    handleSelectionChange(selected) {
      this.selectedSuppliers = selected;
    },
        refreshSearch() {
      // 重置搜索条件
      this.searchQuery2 = '';
      this.showDisabled2 = false;
      this.searchCustomers();
    },
    handleSelectionChange(selected) {
      this.selectedCustomers = selected;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.searchCustomers(); // 重新搜索当前页的数据
    },
    confirmSelection() {
      // 确认选择的客户
      console.log('选中的客户:', this.selectedCustomers);
      this.dialogVisible2 = false; // 关闭弹窗
      // 这里可以触发一个事件或调用一个方法来处理选中的客户
    },
    getRowKey(row) {
      return row.code; // 假设每个客户的code是唯一的
    },
    handleDialogClose() {
      // 弹窗关闭时重置
      this.searchQuery2 = '';
      this.showDisabled2 = false;
      this.selectedCustomers = [];
    },
    handleSizeChange(val) {
      // 分页大小改变时的逻辑
    },
    handleCurrentChange(val) {
      // 当前页码改变时的逻辑
    },
    searchCustomers() {
      // 根据搜索条件进行搜索
      console.log('搜索客户:', this.searchQuery2, this.showDisabled2);
      // 这里可以调用API获取客户列表
      // 模拟数据
      this.customers = [
        { code: 'G00010', name: '深圳蓝天食品公司', category: '广东省内', initialReceivable: '10000' },
        { code: 'G00009', name: '测试111', category: '批发', initialReceivable: '5000' },
        { code: '1000015', name: '小蝶食品', category: '广东省内', initialReceivable: '8000' },
        { code: '1000014', name: '要发发食品', category: '批发', initialReceivable: '12000' },
        { code: '1000013', name: '客户', category: '零售', initialReceivable: '2000' },
        { code: '1000012', name: '食品批发中心', category: '华中地区', initialReceivable: '15000' },
        { code: '1000010', name: '批发', category: '批发', initialReceivable: '9000' },
        { code: '1000009', name: '零售', category: '零售', initialReceivable: '7000' },
        { code: '1000008', name: '客户9', category: '华中地区', initialReceivable: '6000' }
      ];
      this.totalCustomers = this.customers.length;
    },
  },
  created() {
    this.fetchSuppliers();
    this.searchCustomers();
  }
};
</script>

<style scoped>
.table-container {
  overflow-x: auto;
}
.el-table {
  width: 100%;
}

</style>